<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<style>
		.active{
			background: red
		}
	</style>
	<script src="http://localhost:8080/socket.io/socket.io.js"></script>
	<script>
		let sock = io.connect("ws://localhost:8080")
		window.onload  = function(){
			var cur_name = ''
			/**
			 * 下边为保存到本地的信息记录
			 * @type{username:"发送者名字",sendInfo:"发放的信息",zhuKe:"判断是否为自己发送"}
			 */
			var chatRec = JSON.parse(localStorage.getItem("chatsInf"))?JSON.parse(localStorage.getItem("chatsInf")):new Array();
			if(chatRec){
				chatRec.forEach(item=>{
					let oLi = document.createElement("li");
					oLi.innerHTML = `<h4>${item.userName}</h4><p>${item.sendInfo}</p>`;
					if(item.zhuKe==0){
						oLi.classList.add('active');
					};
					$('.oli').appendChild(oLi);
				})
			};
			function jsonType(user,inf,zhu){
				return {
					userName:user,
					sendInfo:inf,
					zhuKe:zhu,//判断主客？主谓0，客为1
				}
			};
			//信息记录
			/**
			 * [saveInf 聊天记录存取]
			 * @return {[flag,infs]} [flag判断是存还是取，真为存，反之为取；infs为需要存的数据]
			 */
			function chatInf(flag,infs){
				if(flag){
					chatRec.push(jsonType(infs.user,infs.inf,infs.zhu))
					localStorage.setItem("chatsInf",JSON.stringify(chatRec))
				}else{
					return localStorage.getItem("chatsInf")
				}
			};
			function $(dom){
				return document.querySelector(dom)
			};
			/**
			 * 接受反馈注册信息
			 * @param  {[fun]} "reg_ret" [返回字段]
			 * @param  {[string]} (code,msg [code为返回的状态值,msg返回的微描述信息]
			 */
			sock.on("reg_ret",(code,msg)=>{
				if(code){
					alert("注册失败"+msg)
				}else{
					alert("注册成功")
				}
			})
			/**
			 * [登录反馈信息]
			 * @param  {[借口]} "log_ret" [返回的借口字段]
			 * @param  {[type]} (code,msg [code为返回的状态值,msg返回的微描述信息]
			 */
			sock.on("log_ret",(code,msg)=>{
				if(code){
					alert("登陆失败"+msg)
				}else{
					alert("登陆成功");
					cur_name = $("#user").value
				}
			});
			/**
			 * [点击发送文本信息的借口]
			 * @param  {[type]} "msg_ret" [消息借口]
			 * @param  {[type]} (code,msg [code为返回的状态值,msg返回的微描述信息]
			 */
			sock.on("msg_ret",(code,msg)=>{
				if(code){
					alert("接受失败"+msg);
				}else{
					let oLi = document.createElement("li");
					oLi.classList.add('active');
					oLi.innerHTML = `<h4>${cur_name}</h4><p>${$("#txt1").value}</p>`
					$('.oli').appendChild(oLi);
					chatInf(true,{
						user:cur_name,
						inf:$("#txt1").value,
						zhu:0});
					$("#txt1").value = '';
				}
			});
			/**
			 * [其他人发送的信息返回借口]
			 * @param  {[type]} 'msg'     [接口]
			 * @param  {[type]} (name,txt [发送者的名字]
			 */
			sock.on('msg',(name,txt)=>{
				let oLi = document.createElement("li");
				oLi.innerHTML = `<h4>${name}</h4><p>${txt}</p>`;
				$('.oli').appendChild(oLi);
				chatInf(true,{
					user:name,
					inf:txt,
					zhu:1})
			});
			/**
			 * [登录注册发送信息点击事件]
			 */
			$("#sigin").onclick=function(){
				sock.emit("reg",$("#user").value,$("#pass").value);
			};
			$("#login").onclick = function(){
				sock.emit("log",$("#user").value,$("#pass").value)
			};
			$("#btn_send").onclick = function(){
				sock.emit("msg",$("#txt1").value)
			}
		}
	</script>
</head>
<body>
	用户名: <input type="text" name="user" id="user" /><br>
	密码: <input type="password" name="pass" id="pass" /><br>
	<input type="button" value="注册" id="sigin">
	<input type="button" value="登陆" id="login">
	<hr>
	<textarea id="txt1" cols="80" rows="4"></textarea>
	<input type="button" id="btn_send" value="发送"><br>
	<ul class="oli">
	</ul>
</body>
</html>